<template>
 <div>
     <table border="1" style="border-collapse:collapse;width:400px;height:300px">
         <tr>
             <th>id</th>
             <th>姓名</th>
             <th>性别</th>
             <th>年龄</th>
             <th>操作</th>
         </tr>
         <tr v-for="item in arr" :key="item.id">
             <td>{{item.id}}</td>
             <td>{{item.name}}</td>
             <td>{{item.sex}}</td>
             <td>{{item.age}}</td>
             <td>
                 <button @click="delte(item.id)">删除</button>
                 <button @click="edit(item)">编辑</button>
             </td>
         </tr>
     </table>
 </div>
</template>

<script>
export default {
    props:['arr'],
    data(){
         return{}
    },
    created(){},
    methods:{
        delte(id){
            
            let index = this.arr.findIndex(item=>{
                return item.id == id;
            });
            
            this.arr.splice(index,1);
            localStorage.setItem('userList',JSON.stringify(this.arr))
        },
        edit(item){
            this.$emit('sendItem',item)
        }
    },
    components:{}
}

</script>
<style scoped>
</style>